
<template>
  <div class="containerWrap">
    <div class="headWrap">
      <div class="content_title">记者人员管理</div>
      <div  class="search">
        <el-form :inline="true"  class="demo-form-inline searchBox">
          <el-form-item label="关键字">
            <el-input
              placeholder="关键词搜索"
              icon="search"
              :on-icon-click="searchByWord">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div >
      <el-tabs type="card" v-model="activeName" @click="handleClick">
        <el-tab-pane label="已冻结" name="0"></el-tab-pane>
        <el-tab-pane label="已过期" name="1"></el-tab-pane>
      </el-tabs>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="date"
          label="登录名">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="address"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="address"
          label="公司">
        </el-table-column>
        <el-table-column
          prop="address"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="edit()"  size="small">编辑</el-button>
            <el-button @click="freeze()"  size="small">冻结</el-button>
            <el-button @click="activate()"  size="small">激活</el-button>
            <el-button @click="deleteUser()" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--记者管理编辑弹框-->
      <el-dialog
        title="记者管理详情"
        :visible.sync="detailVisible"
        width="30%">
        <el-form class="demo-form-inline" label-width="100px">
          <el-form-item label="用户登录名">
            <el-input  placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input  type='textarea' placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input  placeholder=""></el-input>
          </el-form-item>
        <el-form-item label="密码">
          <el-input  type='passworld' placeholder=""></el-input>
          <el-button @click="resetPassword">重置密码</el-button>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="detailVisible = false">取 消</el-button>
    <el-button type="primary" >确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        tableData: [{'id': 1}],
        activeName: '0',
        detailVisible: false
      };
    },
    methods: {
      // 关键字搜索
      searchByWord () {
        alert('关键字搜索');
      },
      // 编辑
      edit () {
        this.detailVisible = true;
        alert('编辑');
      },
      // 冻结
      freeze () {
        alert('冻结');
      },
      // 激活已冻结用户
      activate () {
        alert('激活');
      },
      // 删除
      deleteUser () {
        alert('删除');
      },
      // 切换tab页签
      handleClick (tab, event) {
        this.activeName = tab.name;
        alert('切换Tab页签');
      },
      // 重置密码
      resetPassword () {
        alert('重置密码');
      }
    },
    components: {},
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
